<template>
  <div class="body" style="margin: 5px 5px">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple" style="background-color: floralwhite">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-tooltip content="请选择父级工单流程" placement="bottom" effect="light">
            </el-tooltip>
          </el-form-item>
          <el-form-item label="">
              <table border="0">
                <tr>
                  <th colspan="3">第一步</th>
                </tr>
                <tr>
                  <th>工单流程</th>
                  <th></th>
                  <th>工单模板</th>
                </tr>
                <tr>
                  <td>
                    <el-cascader
                      :options="flowList"
                      change-on-select
                      v-model="workOrder"
                      placeholder="请选择工单流程"
                      filterable
                    ></el-cascader>
                  </td>
                  <p>⇄</p>
                  <td>
                    <el-select v-model="modelvalue" placeholder="请选择工单模板" @change="handselect">
                      <el-option
                        v-for="item in modelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </td>
                <tr>
                  <th colspan="3"><i class="el-icon-caret-bottom"></i></th>
                </tr>
                <tr>
                  <th colspan="3">第二步</th>
                </tr>
                <tr>
                  <th>工单流程节点</th>
                  <th></th>
                  <th>工单模板节点</th>
                </tr>
                <tr v-for="(todo,index) in options1">
                  <td>
                    <el-select v-model="todo.label" disabled placeholder="工单流程节点" size="small">
                      <!--<el-option-->
                        <!--v-for="item in options1"-->
                        <!--:key="item.todo.value"-->
                        <!--:label="item.label"-->
                        <!--:value="item.value">-->
                      <!--</el-option>-->
                    </el-select>
                  </td>
                  <p>⇄</p>
                  <td>
                    <el-select v-model="value3[index]" placeholder="工单模板节点" size="small">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <th colspan="3">
                    <el-button type="primary" @click="SubmitBinding">提交绑定</el-button>
                  </th>
                </tr>
              </table>
          </el-form-item>
        </el-form>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import axios from 'axios';
  import QS from 'qs';

    export default {
      name: "flowBingdingAdd",
      computed: {
        ...mapState([
          'flowList',
          'modelList',
        ]),
      },
      data(){
        return{
          formInline: {
            user: '',
            region: ''
          },
          flowChild: [],
          options1: [],
          options: [],
          workOrder: '',
          value3: [],
          flowvalue: '',
          modelvalue: '',
          modelListPositioning : {},

        }
      },
      methods:{
        handselect(){
          console.log(this.modelvalue)
          var that = this;
          var flowChlidId = {};
            flowChlidId['processDefinitionId'] = that.workOrder[1] //由于级联选择选择了父和子，但是后台只需要子，所以把数组中子ID传给后台就可以了
          axios.post('/api/workflow/findProcessNodeByProcessDefinitionId',QS.stringify(flowChlidId))
            .then(function (response) {
              const data = response.data;
              const userTaskLength = data.data.userTask.length
              //获取子流程节点
              if (data.code == "200"){
                that.options1 = [];
                for (var i=0; i<userTaskLength; i++) {
                  var option = {};
                  option.value = data.data.userTask[i].userTaskId
                  option.label = data.data.userTask[i].userTaskName
                  that.options1.push(option);
                };
                // that.$store.commit('userTableList',data.data);  //通过commit操作store中mutations下的userTableList方法，完成对数组的赋值。
              }else if (data.code == "201") {
                alert(data.code + '您所查询的信息不存在！请重新输入!');
              }else{
                alert('错误代码:' + data.code + '请联系系统管理员！');
              };
              //获取子模型节点
              //获取modelList获取出的ID对应的对象
              for (i=0; i<that.modelList.length ; i++){
                var modelThis = {};
                  modelThis = that.modelList[i];
                if (modelThis.id == that.modelvalue){   //根据id取到对应的数组，拿到这个对象后即可对后面的数据进行操作
                  var modelChildLength = modelThis.children.length;
                  var modelChildDataList = modelThis.children;
                  that.modelListPositioning = modelThis;
                  that.options = [];
                  for (var i=0; i<modelChildLength; i++) {
                    var modelChildData = modelChildDataList[i]
                    var modeloptions = {}
                    modeloptions.value = modelChildData.id
                    modeloptions.label = modelChildData.name
                    that.options.push(modeloptions);
                  };
                  break;
                }else {

                };
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        //提交绑定
        SubmitBinding(){
          var that = this;
          var options1Length = this.options1.length;
          var BindingDataList = [];
          var BindingData = {};
          // console.log("175"+":"+JSON.stringify(this.modelListPositioning.id)+ ":"+JSON.stringify(this.modelListPositioning.name))
          for (var i=0; i<options1Length; i++){
            BindingData['workflowId'] = this.workOrder.toString().split(",")[1];
            BindingData['modelPid'] = this.modelListPositioning.id; //
            BindingData['workflowNodeId'] = this.options1[i].value;
            BindingData['modelId'] = this.value3[i];
            BindingData['workflowVersion'] = this.workOrder.toString().split(",")[0];
            BindingData['workflowName'] = this.modelListPositioning.name; //
            BindingData['workflowNodeName'] = this.options1[i].label;
            BindingDataList.push(BindingData);
          }
          var BindingDataListJSON = JSON.stringify(BindingDataList);
          var bindJson = {};
            bindJson['bindJson'] = BindingDataListJSON;
          console.log("188"+BindingDataListJSON)
          axios.post('/api/case/addModelWorkFlowNode',QS.stringify(bindJson))
            .then(function (response) {
              const data = response.data;
              //获取子流程节点
              if (data.code == "200") {
                alert('添加成功1');
                that.$router.push({ path: '/workOrderFlow/flowBinding' });
              } else if (data.code == "201") {
                alert(data.code + '您所查询的信息不存在！请重新输入!');
              } else {
                alert('错误代码:' + data.code + '请联系系统管理员！');
              };
            })
          console.log('167:'+ BindingData)
        },
      },
    }
</script>

<style scoped>
  body{
    margin: 100px 100px;
    height: auto;
    width: auto;
  }


</style>
